<template>
  <div>
    <el-form ref="selectForm" :model="selectForm" label-width="80px" class="change-box">
      <h3 class="select-title">填写基本信息</h3>

      <el-form-item label="输入账号" prop="password">
        <el-input type="user" placeholder="请输入账号" v-model="selectForm.user"/>
      </el-form-item>

      <el-form-item>
        <div style="align-content: center">
          <el-radio-group v-model='u' size="small" class="view" @change="changeInput"
                          style="background-color: #ffffff;">
            <el-radio-button label="用户"/>
            <el-radio-button label="租户"/>
            <el-radio-button label="答者"/>
          </el-radio-group>
        </div>
      </el-form-item>

      <el-form-item>
        <el-space wrap :size="100">
          <el-button type="primary" v-on:click="onConfirm()">确定</el-button>
          <el-button type="warning" v-on:click="onReturn()">返回</el-button>
        </el-space>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import router from "@/router";
import {ElMessage} from "element-plus";


export default {
  name: "SelectGenre",
  data() {
    return {
      u: '',
      selectForm: {
        user: ''
      },
      radioValue: ''
    }
  },
  methods: {
    onConfirm() {
      //发送用户名和用户类型到后端 -> 验证成功后跳转到找回密码页面
      //url未填充
      if (this.selectForm.user === '') {
        ElMessage.error('用户名不能为空')
      } else if (this.radioValue === '') {
        ElMessage.error('请选择你的用户类型')
      } else {
        // router.push("/retrieval")
        // let config = {
        //   headers: {
        //     "Content-Type": "multipart/form-data"
        //   }
        // };
        // let formData = new FormData();
        // formData.append("user", );
        // formData.append("genre", );
        this.$axios.post('http://localhost:8090/register/resetQueryInfo', {
          name:this.selectForm.user,
          type:this.radioValue.toString(),
        }).then(response => {
          console.log("response")
          console.log(response)
          if (response.data.code === "200") {
            ElMessage({
              showClose: true,
              message: '账号验证成功',
              type: 'success'
            })
            if (this.$cookies.isKey("user")) {
              this.$cookies.remove("user");
            }
            this.$cookies.set("type",this.radioValue.toString())
            this.$cookies.set("user", this.selectForm.user);
            router.push("/retrieval")
          } else {
            ElMessage.error('页面跳转失败')
          }
        })
      }
    },
    onReturn() {
      router.push('/')
    },
    changeInput(index) {
      this.radioValue = index
    }
  }
}
</script>

<style scoped>
.change-box {
  border: 1px solid #DCDFE6;
  width: 400px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}

.change-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}
</style>
